<template>
	<view class="user-page">
		<!-- 顶部用户信息 -->
		<view class="user-box">
			<image src="https://media.codecore.cn/uploads/2022/11/15/PzayyNLr_true.jpg"></image>
			<view class="user" @click="goUser">
				<view class="name">
					<view class="nickName">哎呦薇</view>
					<van-tag size="medium" round color="#222" text-color="#fff">15积分</van-tag>
				</view>
				<image src="https://media.codecore.cn/uploads/2022/11/15/KUaWeBzt_weixin.jpg"></image>
			</view>
			<view class="member-box">
				<image src="@/static/other/dio.png"></image>
				<view class="shop">哎呦薇小站</view>
				<view class="member">成为会员
					<van-icon name="arrow"></van-icon>
				</view>

			</view>
		</view>

		<view class="card">
			<van-grid>
				<van-grid-item use-slot>
					<view class="number">0</view>
					<view class="text">余额</view>
				</van-grid-item>
				<van-grid-item use-slot>
					<view class="number">0</view>
					<view class="text">卡</view>
				</van-grid-item>
				<van-grid-item use-slot>
					<view class="number">1</view>
					<view class="text">优惠券</view>
				</van-grid-item>
				<van-grid-item use-slot>
					<view class="number">15</view>
					<view class="text">积分</view>
				</van-grid-item>
			</van-grid>
		</view>
		<!-- 订单管理 -->
		<view class="card">
			<van-cell @click="goOrder(4)" title="全部订单" is-link></van-cell>
			<van-grid :column-num="5">
				<van-grid-item @click="goOrder(0)" icon="pending-payment" text="待付款" />
				<van-grid-item @click="goOrder(1)" icon="paid" text="待发货" />
				<van-grid-item @click="goOrder(2)" icon="logistics" text="待收货" />
				<van-grid-item @click="goOrder(3)" icon="comment-o" text="待评价" />
				<van-grid-item @click="goOrder(5)" icon="balance-pay" text="售后/退款" />
			</van-grid>
		</view>
		<!-- 其他功能 -->
		<view class="card">
			<van-cell @click="goList('/user/address/list')" icon="location-o" title="收货地址" is-link />
			<van-cell icon="coupon-o" title="优惠券" is-link value="1" />
			<van-cell icon="service-o" title="客服" is-link />
			<!-- <van-cell  icon="notes-o" title="关于" is-link value="" /> -->
			<van-cell icon="setting-o" title="设置" is-link />
		</view>

		<!-- 底部信息 -->
		<view>
			凡心有限科技公司提供技术支持
		</view>
	</view>
</template>

<script>
	import UserPage from '@/utils/uni-user.js'
	import Storage from '@/utils/storage.js'
	export default {
		onLoad() {
			let user = Storage.UserInfo;
			if(!user){// 判断登录状态尽量使用状态管理器
				UserPage.PwdLogin()
			}
		},
		methods: {
			goOrder(index) {
				uni.navigateTo({
					url: `/pages/order/order?index=${index}`
				})
			},
			goList(url) {
				uni.navigateTo({
					url: `/pages${url}?page=user`
				})
			},
			goUser() {
				// todo判断一下用户是否登录过了 没有登录去登录 等过过去信息管理页面
				if (Storage.isLogin()) {
					// 修改页面
					UserPage.User()
				} else {
					UserPage.PwdLogin()
				}

			}
		}
	}
</script>

<style>
	.user-page {
		width: 100%;
		height: calc(100vh - 94px);
		background-color: #f2f2f2;
	}

	.user-box {
		width: 100%;
		height: 375rpx;
		position: relative;
	}

	.user-box image {
		width: 100%;
		height: 100%;
	}

	.user {
		position: absolute;
		top: 125rpx;
		width: 700rpx;
		left: 25rpx;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.user .nickName {
		font-size: 36rpx;
		font-weight: bold;
		margin: 0 10rpx;
	}

	.user image {
		width: 99rpx;
		height: 99rpx;
		border-radius: 100%;
	}

	.member-box {
		position: absolute;
		bottom: 0;
		width: 80%;
		height: 80rpx;
		background-color: #222e;
		left: 10%;
		display: flex;
		align-items: center;
		color: #FFF;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
	}

	.member-box image {
		width: 44rpx;
		height: 44rpx;
		margin: 22rpx;
	}

	.member-box .member {
		flex-grow: 1;
		text-align: right;
		margin-right: 22rpx;
	}

	.card {
		width: 700rpx;
		margin: 25rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.card .number {
		font-size: 36rpx;
		font-weight: bold;
	}

	.card .text {
		color: #666;
		font-size: 28rpx;
	}
</style>
